<template>
  <div class="box">
    <!-- 上半 -->
    <div class="top">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        style="margin: 20px 0 10px 0"
      >
        <el-form-item label="姓名">
          <el-input
            v-model="form.name"
            placeholder="请输入姓名"
            style="width: 250px"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-divider class="line"></el-divider>
      <div class="but">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <!-- 下半 -->
    <div class="btm">
      <el-row>
        <el-col :span="4">
          <el-menu
            style="margin: 20px 0 0 10px"
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-caret-right"></i>
                <span>小学</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">一年级</el-menu-item>
                <el-menu-item index="1-2">二年级</el-menu-item>
                <el-menu-item index="1-3">三年级</el-menu-item>
                <el-menu-item index="1-4">四年级</el-menu-item>
                <el-menu-item index="1-5">五年级</el-menu-item>
                <el-menu-item index="1-6">六年级</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-caret-right"></i>
              <span slot="title">初中</span>
            </el-menu-item>
          </el-menu>
        </el-col>

        <el-col :span="20">
          <el-divider direction="vertical" class="line1"></el-divider>
          <div class="right">
            <div class="text" @click="dialogForm = true">
              <i class="el-icon-s-tools"></i>
              <span style="margin-left: 10px">设计年级主任</span>
            </div>
            <el-dialog :visible.sync="dialogForm" custom-class="blue-title">
              <template slot="title">
                <div class="blue-title">
                  <span class="bule-title-text">设置年级主任</span>
                </div>
              </template>
              <el-divider></el-divider>
              <div class="form1">
                <el-form :model="form" inline>
                  <el-form-item label="姓名" style="margin-right: 20px">
                    <el-input
                      v-model="form.name"
                      placeholder="请输入姓名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="证件号码" style="margin-right: 130px">
                    <el-input
                      v-model="form.name"
                      placeholder="请输入证件号码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="onSubmit"
                      style="margin: 0 10px"
                      >查询</el-button
                    >
                    <el-button type="primary">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="tab">
                <el-table
                  ref="singleTable"
                  :data="tableData1"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  style="width: 100%;margin-bottom: 20px;"
                >
                  <el-table-column width="50">
                    <!-- 自定义表头 -->
                    <template #header>
                      <span>序号</span>
                    </template>
                    <!-- 自定义单元内个内容为选择框 -->
                    <template #default="{ $index }">
                      <el-checkbox
                        :model-value="selection.includes($index)"
                        @change="toggleSelection($index)"
                      ></el-checkbox>
                    </template>
                  </el-table-column>
                  
                  <el-table-column property="name" label="姓名" width="120">
                  </el-table-column>
                  <el-table-column property="sex" label="性别" width="120">
                </el-table-column>
                <el-table-column property="number" label="证件类型" width="120">
                </el-table-column>
                
                  <el-table-column property="lianxi" label="联系方式" width="120">
                  </el-table-column>
                  <el-table-column property="number1" label="证件号码" width="120">
                  </el-table-column>
                  <el-table-column property="xuexiao" label="学校" width="120">
                </el-table-column>
                </el-table>
               <div class="button">
                <el-button round style="margin-right: 20px">取消</el-button>
                <el-button type="primary" round>确定</el-button>
               </div>
              </div>
            </el-dialog>
            <el-table
              :data="tableData"
              border
              style="width: 96%; margin-left: 40px; text-align: center"
              class="table"
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column prop="name" label="名称" width="280px">
              </el-table-column>
              <el-table-column prop="date" label="联系方式" width="280px">
              </el-table-column>
              <el-table-column prop="nianji" label="年级" width="280px">
              </el-table-column>
              <el-table-column prop="caozuo" label="操作" width="280px">
                <el-button type="text" size="small">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        selection:[],//存储选中的索引
      tableData: [
        {
          name: "张三",
          date: "123456789",
          nianji: "一年级",
          caozuo: "",
        },
        {
          name: "李四",
          date: "123456789",
          nianji: "二年级",
          caozuo: "",
        },
      ],
      tableData1:[{

    name:"李大勇",
sex:"男",
number:"身份证",
lianxi:"123456789",
number1:"123456789",
xuexiao:"小学",


      }],
      form: {
        name: "",
      },
      dialogForm: false,
    };
  },
  created(){
const data =this.tableData1[0];
for(let i=1;i<10;i++){
this.tableData1.push({...data})
}
  },
  methods: {
    toggleSelection(index){
        const idx =this.selection.indexOf(index);
        if(idx>-1){
            this.selection.splice(idx,1);

        }else{
            this.selection.push(index);
        }
    }
  },
};
</script>

<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .top {
    width: 100%;
    height: 160px;
    background-color: #fff;
    border-radius: 10px;
    .line {
      width: 90%;
      margin: 20px 40px;
    }
    .but {
      margin: 10px 0 10px 40px;
    }
  }

  .btm {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 20px;
    .el-row {
      width: 100%;
      height: 100%;
    }
    .left-col {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .right-col {
      position: relative; //定位分割线
      height: 100%;
    }
    .line1 {
      position: absolute; //
      height: 80%;
      margin: 20px;
    }
    .text {
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: blue;
      background-color: #fff;
      width: 100wh;
      height: auto;

      margin: 20px 0 0 40px;

      line-height: 100px;
      i {
        font-size: 30px;
      }
    }
    .table {
      border: 1px solid #e0e0e0;

      /* 移除表头边框 */
      ::v-deep .el-table__header-wrapper th {
        border-right: none !important;
      }
      /* 移除单元格边框 */
      ::v-deep .el-table__body-wrapper td {
        border-right: none !important;
      }
    }

    /* 隐藏表格的伪元素边框 */
    .table::before,
    .table::after {
      display: none;
    }
    .blue-title {
      position: relative;

      /*蓝色装饰线*/
      .blue-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 24px;
        background-color: #409eff;
      }
      .bule-title-text {
        color: #0c0c0c;
        font-size: 20px;
        font-weight: bold;
        margin-left: 10px;
      }
    }

    ::v-deep .el-dialog__header {
      padding-bottom: 0px;
    }
    ::v-deep .el-dialog__body {
      padding: 0px 20px;
    }

    .form1 {
      margin-bottom: 10px;
    }
    .button{
        display: flex;
       justify-content: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
  }
}
</style>
